<template>
  <canvas ref="canvas" class="absolute" />
</template>

<script setup lang="ts">
import useBet from '@/composables/useBet'
import { CurveCanvas, CurveConfig } from '@/composables/useCanvas/CurveCanvas'
import useSection from '@/composables/useSection'
import useTower from '@/composables/useTower'
import { onMounted, ref } from 'vue'

const canvas = ref<HTMLCanvasElement>()
const { sectionId } = defineProps<{
  sectionId: number
}>()

const { bets, all: allBet } = useBet()
const { towers, all: allTower } = useTower()
const { find: findSection, calcCanvasAndHeight } = useSection()

onMounted(async () => {
  await allBet({ sectionId })
  await allTower({ sectionId })
  await findSection(sectionId)

  const lst_config: CurveConfig[] = []
  bets.value!.data.forEach((bet) => {
    const { btSpan, h } = bet
    const [towerName0, _] = bet.btName.split('-')
    const tower0 = towers.value!.data.find((t) => t.tName === towerName0)
    const Hi = 3000
    const w = 3.15
    lst_config.push({ Hi, h: h!, w, btSpan, towerPoint: { x0: tower0!.leiSpan!, y0: tower0!.altitude } })
  })

  const parent = canvas.value?.parentNode?.parentNode as any
  const { width, height, startY } = await calcCanvasAndHeight(parent!.offsetWidth, parent!.offsetHeight)

  // 绘制曲线
  const cxt = canvas.value!.getContext('2d')!
  new CurveCanvas(canvas.value!, cxt, width, height, startY, 40, lst_config)
})
</script>
